<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="bg-yellow light padding-sm text-center" v-if="data.diary.status==0">
			该信息正在审核中
		</view>
		<view class="head solid-top padding-top bg-white">
			<view class="cu-list menu-avatar">
				<view class="cu-item noaf">
					<view class="cu-avatar round xl" :style="'background-image:url('+data.diary.avatar+');'"></view>
					<view class="content">
						<view class="text-bold text-lg padding-left-xs">{{data.diary.name}}</view>
						<view class="flex text-grey padding-left-xs">
							<view class="text-cut">于{{data.diary.worksTime}}发布</view>
						</view>
					</view>
					<view class="action btn">
						<button open-type="share" v-if="platform=='wxapp'" class="cu-btn bg-gradual-yellow round">分享</button>
						<button @click="showshare=true" v-else class="cu-btn bg-gradual-yellow round">分享</button>
					</view>
				</view>
			</view>
		</view>
		<view class="padding diary-detail padding-top-sm bg-white">
			<view class="solid-top padding-tb-sm">
				<view class="diary-video margin-top-sm" v-if="data.diary.videourl!=''">
					<video id="myVideo" show-mute-btn="true" :title="data.title" :autoplay="autoplay" :src="playurls[playmode]" class="only-img bg-gradual-purple" :poster="data.diary.cover"></video>
					<view class="flex justify-between margin-top-xs">
						<view class="text-gray">视频时长：{{data.diary.duration || '未知'}}</view>
						<view class="text-sm">
							<view class="cu-tag" :class="playmode=='no'?'bg-red':'line-red'" @click="doPlay('no')">原画</view>
							<view class="cu-tag" v-if="playurls.hd!=''" :class="playmode=='hd'?'bg-red':'line-red'" @click="doPlay('hd')">高清</view>
							<view class="cu-tag" v-if="playurls.sd!=''" :class="playmode=='sd'?'bg-red':'line-red'" @click="doPlay('sd')">标清</view>
						</view>
					</view>
				</view>
				<view class="text-content margin-top-sm" v-if="data.diary.content!=''">
					<rich-text :nodes="data.diary.content" :selectable="true"></rich-text>
				</view>
				<view class="diary-images grid flex-sub col-1 margin-top-sm" v-if="data.diary.pics.length>0">
					<view class="only-img" @click="viewImage(data.diary.pics,key)" v-for="(pic,key) in data.diary.pics" :key="key">
						<image class="png" mode="widthFix" :src="pic"></image>
					</view>
				</view>
				<view class="diary-tags margin-top-sm" v-if="data.diary.tags.length>0">
					<view class="cu-tag round bg-orange light" v-for="(tag, key) in data.diary.tags" :key="key">
						<text>{{tag}}</text>
					</view>
				</view>
				<view class="text-gray text-xl flex justify-end padding padding-top-sm">
					<view class="text-red text-lg" v-if="userId==data.diary.uid" @click="doRemove(data.diary.id)">
						<text>删除</text>
					</view>
					<view class="text-blue text-lg margin-left" v-if="userId==data.diary.uid" @click="naviTo('index/post',{id:data.diary.id,special:data.diary.special})">
						<text>编辑</text>
					</view>
					<view class="margin-left">
						<text class="cuIcon-attention margin-lr-xs"></text> {{data.diary.views}}
					</view>
					<view @click="doLike(data.diary.id)" class="margin-left">
						<text class="margin-right-xs" :class="data.diary.hasliked?'cuIcon-appreciatefill text-yellow':'cuIcon-appreciate'"></text> {{data.diary.like}}
					</view>
					<view class="margin-left" @click="action='comment'">
						<text class="cuIcon-message margin-right-xs"></text> {{data.comments.length}}
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm diary-goods" v-if="data.goods.length>0">
			<view class="cu-bar">
				<view class="action">
					<text class="text-bold text-xl text-black">商品推荐</text> <text class="cuIcon-title text-orange padding-left-sm"></text>
				</view>
				<view class="action" @click="naviTo('shop/index')">
					<view class="text-gray">更多<text class="cuIcon-right"></text></view>
				</view>
			</view>
			<view class="padding-xs grid col-3 goods">
				<view @click="naviTo('shop/goods',{id:item.id})" class="padding-xs goods-item bg-white" v-for="(item, index) in data.goods" :key="index">
					<image :src="item.thumb" mode="aspectFit"></image>
					<view class="title">{{item.title}}</view>
					<view class="price"><text class="left">￥{{item.marketprice}}</text></view>
				</view>
			</view>
		</view>
		<view class="diary-comments bg-white margin-top-sm">
			<view class="cu-bar solid-bottom">
				<view class="action title-style-3">
					<text class="text-lg text-bold text-black">评论({{data.comments.length}})</text>
				</view>
			</view>
			<view class="padding-xl text-gray text-center" v-if="data.comments.length==0">
				<text class="text-empty">评论区空空如也，快去抢沙发吧~</text>
			</view>
			<view class="comments mini padding-bottom margin-top" v-else>
				<view class="cu-list menu-avatar padding-left-sm" v-for="(item, index) in data.comments" :key="index">
					<view class="cu-item noaf">
						<view class="cu-avatar round" :style="'background-image:url('+item.avatar+');'"></view>
						<view class="content">
							<view class="text-black">
								{{item.name}}
								<text class="cuIcon-delete text-red margin-left" @click="removeComment(item.id)" v-if="userId==item.uid"></text>
							</view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">{{item.createtime}}</view>
						</view>
					</view>
					<view class="summary">{{item.content}}</view>
				</view>
				<view class="text-center padding margin-top" @click="loadComment(commentpage+1)" v-if="loadmore=='more'">
					<view class="text-yellow">查看更多</view>
				</view>
			</view>
		</view>
		<view class="cu-bar tabbar input foot">
			<view class="action" @click="doLike(data.diary.id)">
				<view :class="data.diary.hasliked?'cuIcon-appreciatefill text-yellow':'cuIcon-appreciate text-gray'">
					<view class="cu-tag badge" v-if="data.diary.like>0">{{data.diary.like}}</view>
				</view>
			</view>
			<button class="action" open-type="share" v-if="platform=='wxapp'">
				<view class="cuIcon-share text-gray"></view>
			</button>
			<view class="action" v-else @click="showshare=true">
				<view class="cuIcon-share text-gray"></view>
			</view>
			<input @confirm="doComment" :auto-focus="action=='comment'?true:false" :class="comment.content!=''?'hasval':''" v-model="comment.content" placeholder="来一条高能的评论" :adjust-position="false" class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
			<button class="cu-btn bg-green shadow-blur" v-if="comment.content!=''" @click="doComment">发表</button>
		</view>
		<share :platform="platform" :shareinfo="shareinfo" @closeshare="showshare=false" :showshare="showshare"></share>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	import share from "@/components/util/share.vue"
	
	export default {
		components: {share},
		data() {
			return {
				id:0,
				userId:0,
				commentpage:1,
				loadmore:'more',
				showmodal:'',
				platform:'',
				action:'',
				showshare:false,
				player:null,
				playmode:'no',
				comment:{
					score:0,
					cid:0,
					content:""
				},
				playurls:{
					'no':'',
					'hd':'',
					'sd':''
				},
				shareinfo:{
					url:'',
					providers:4,
					provider:{}
				},
				autoplay:false,
				data:{
					title:"查看日记详情",
					playset:{
						autoplay:1,
						playmode:'no'
					},
					"diary": {
					        "id": 0,
					        "uniacid": 0,
					        "uid": 0,
					        "lid": 0,
					        "special": 2,
					        "type": 3,
					        "title": "",
					        "cover": "",
							"createtime":"",
					        "videourl": "",
					        "videohd": "",
					        "videosd": "",
					        "duration": "",
					        "content": "",
					        "tags": [],
					        "pics": [],
					        "views": 0,
					        "like": 0,
					        "likers": {},
					        "isdiary": 1,
					        "displayorder": 0,
					        "status": 1,
					        "dateline": 0,
					        "addtime": 0,
					        "nickname": "",
					        "avatar": "",
					        "hasliked": false,
					        "comment": 0,
							"url":""
					    },
					    "comments": [],
					    "goods": []
				}
			}
		},
		onLoad(options) {
			if(typeof(options.id)=='undefined' || !options.id) return core.toast('参数错误：无效的编号','back');
			if(typeof(options.act)!='undefined') this.action = options.act;
			this.id = options.id;
			this.userId = core.userinfo.uid;
			this.platform = core.platform;
		},
		onShow(options) {
			var that = this;
			this.initData('diary/detail',{id:this.id},function(res){
				that.loadmore = res.comments.length<15 ? 'noMore' : 'more';
				if(that.action=='play' && res.diary.videourl!=''){
					that.autoplay = true;
				}
				if(res.diary.videourl!='' && core.platform!='aliapp'){
					that.player = uni.createVideoContext('myVideo');
				}
			});
			/**
			 * 延迟执行
			 */
			setTimeout(()=>{
				this.upWorksByViews()
			},800);
			
		},
		onHide() {
			if(this.player){
				this.player.pause();
			}
		},
		onShareAppMessage(e){
			return {
				title:this.data.title,
				path:core.page(this.shareinfo.url)
			}
		},
		onPullDownRefresh() {
			var that = this;
			this.initData('diary/detail',{id:this.id},function(res){
				that.commentpage = 1;
				that.loadmore = res.comments.length<15 ? 'noMore' : 'more';
				if(that.action=='play' && res.diary.videourl!=''){
					that.autoplay = true;
				}
				if(res.diary.videourl!='' && core.platform!='aliapp'){
					that.player = uni.createVideoContext('myVideo');
				}
			});
			uni.stopPullDownRefresh();
		},
		methods:{
			async initData(route, data={}, callback=false){
				var that = this;
					this.data.diary= (await this.$api.reqGet({
						url:"works/selByid/"+this.id
					})).data;
					if(this.data.diary!=null){
						this.data.diary.tags = JSON.parse(this.data.diary.tags);
						this.data.diary.pics= JSON.parse(this.data.diary.pics)
						this.data.title=this.data.diary.content;
						that.playurls = {
								'no':that.data.diary.videourl,
								'hd':that.data.diary.videourl,
								'sd':that.data.diary.videourl
							};
					}else{
						
					}
					console.log(this.data.diary)
					
					/**
					 * 查询当前作品有没有被点赞
					 */
					this.like();
					this.infocomments();
				// core.get(route,function(res){
				// 	if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 		return core.report(res, true);
				// 	}
				// 	that.autoplay = res.playset.autoplay==1 ? true : false;
				// 	that.data = res;
				// 	console.log(res)
				// 	that.playurls = {
				// 		'no':res.diary.videourl,
				// 		'hd':res.diary.videohd,
				// 		'sd':res.diary.videosd
				// 	};
				// 	if(res.playset.playmode=='sd'){
				// 		if(that.playurls.sd!=''){
				// 			that.playmode = 'sd'
				// 		}else{
				// 			res.playset.playmode = 'hd';
				// 		}
				// 	}
				// 	if(res.playset.playmode=='hd' && that.playurls.hd!='') that.playmode = 'hd';
				// 	that.shareinfo = core.initshare(res.title,res.diary.url,res.diary.cover,res.diary.content);
				// 	uni.setNavigationBarTitle({
				// 		title:res.title
				// 	});
				// 	if(callback){
				// 		callback(res);
				// 	}
				// },data);
			},
			async infocomments(){
				var that=this;
				/**
				 * 根据被评论id和评论类型  查询评论
				 */
				that.data.comments=(await this.$api.reqGet({
					url:"comments/selByAid/"+that.data.diary.id+(this.data.diary.cover==''?"/diary":"/works")
				})).data;
				console.log(that.data.comments)
				if(that.data.comments==null){
					that.data.comments=[]
				}
			},
			async upWorksByViews(){
				var line= (await this.$api.reqPost({
					url:"works/upWorksByViews",
					data:{id:this.data.diary.id,views:this.data.diary.views}
				})).data;
				if(line>0){
					this.data.diary.views=this.data.diary.views+1;
				}
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			doRemove(id){
				var that=this;
				return core.confirm('将清理掉所有评论数据且不可恢复','删除信息',function(){
					that.delete(id);
					// core.get('diary/remove',function(res){
					// 	core.report(res);
					// },{id:id});
				});
			},
			doPlay(mode='no'){
				this.playmode = mode;
				if(this.player){
					this.player.play();
				}else{
					this.autoplay = true;
				}
			},
			delete(id){
				(this.$api.reqGet({
					url:"works/deleteByid/"+id
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						core.navito("diary/index",'',1)
					}
				}))
			},
			async doComment(){
				if(core.userinfo.uid<=0) return core.toast('请先登录','login');
				if(this.comment.content=='') return core.toast('先说点什么再发表吧~');
				let postdata = this.comment;
				postdata.type = this.data.diary.cover==''?"diary":"works";
				postdata.aid = this.data.diary.id;
				postdata.uid = this.data.diary.uid;
				var that = this;
				var line=(await this.$api.reqPost({
					url:"comments/addComments",
					data:postdata
				}));
				console.log(line)
				console.log(line.data)
				if(line.data!=null){
					core.toast(line.msg,'','success');
						that.comment.content = '';
						that.data.diary.comment += 1;
						this.initData();
						// that.loadComment(1);
				}
				// return core.post('comment/post',function(res){
				// 	if(res.type!='success') return core.toast(res.message);
				// 	core.toast(res.message,'','success');
				// 	that.comment.content = '';
				// 	that.data.diary.comment += 1;
				// 	that.loadComment(1);
				// },{data:postdata});
			},
			async like(){
				var that=this;
				if(core.userinfo.uid!=null){
					var likeCecord=(await this.$api.reqGet({
						url: "menu/selLike/"+core.userinfo.uid,
					})).data;
					for(var i=0;i<likeCecord.length;i++){
						if(likeCecord[i].worksid==that.data.diary.id){
							that.data.diary.hasliked = !(that.data.diary.hasliked);
						}
					}
				}
			},
			async doLike(id){
				this.data.diary.tags = JSON.stringify(this.data.diary.tags);
				this.data.diary.pics= JSON.stringify(this.data.diary.pics)
				if (core.userinfo.uid <= 0) return core.toast('请先登录22', 'login');
				 var that = this;
				 that.data.diary.hasliked = !that.data.diary.hasliked;
				 that.data.diary.like += that.data.diary.hasliked ? 1 : -1;
				var a= (await this.$api.reqPost({
					url:"menu/addLike",
					data:{uid:core.userinfo.uid,
						worksid:id,
						worksshow:that.data.diary},
				})).data;
				if(a!=null){
					this.data.diary.tags = JSON.parse(this.data.diary.tags);
					this.data.diary.pics= JSON.parse(this.data.diary.pics)
				}
				// return core.get('diary/like',function(res){
				// 	if(res.type!='success') return core.report(res);
				// 	that.data.diary.hasliked = !that.data.diary.hasliked;
				// 	that.data.diary.like += that.data.diary.hasliked ? 1 : -1;
				// },{id:id});
			},
			viewImage(images=[],index=0){
				uni.previewImage({
					current:index,
					urls:images,
					indicator:'number'
				})
			},
			loadComment(page=1){
				var that = this;
				return core.get('comment',function(res){
					that.commentpage = page;
					that.loadmore = res.list.length<15 ? 'noMore' : 'more';
					if(page==1){
						that.data.comments = res.list;
					}else{
						if(res.list.length==0) return that.loadmore='noMore',core.toast('没有更多了~');
						that.data.comments = that.data.comments.concat(res.list)
					}
				},{type:'diary',aid:this.data.diary.id,cid:0,page:page});
			},
			removeComment(cid=0){
				if(!cid) return core.toast('参数异常：无效的评论编号');
				var that = this;
				return core.confirm('删除后不可恢复，是否确定要删除？','删除评价',function(){
					(that.$api.reqGet({
						url:"works/deleteByAid/"+cid
					}).then(res=>{
						console.log(res)
						if(res.code==200){
							that.data.diary.comment -= 1;
								that.infocomments();
						}
					})) 
					// core.get('comment/remove',function(res){
					// 	if(res.type!='success') return core.toast(res.message);
					// 	that.data.diary.comment -= 1;
					// 	that.loadComment(1);
					// },{cid:cid});
				});
			}
		}
	}
</script>

<style>
	page{background: #F2F2F2; padding-bottom: 100upx;}
	.diary-video .only-img{width: 100%; height: 320upx;}
	.diary-detail .text-content{line-height: 46upx; color: #666; letter-spacing: 1upx; font-size: 32upx; font-family: PingFangSC-Regular,PingFang SC;}
	.diary-images image{width: 100%;}
	.foot.input input.solid-bottom{flex: 5;}
	.foot.input input.solid-bottom.hasval{flex: 4;}
</style>
